$prefix: gpg-tag;
.#{$prefix}-icon-green {
  color: $primary-success;
  cursor: pointer;
}
.#{$prefix}-icon-red {
  color: $primary-danger;
  cursor: pointer;
}
.#{$prefix}-icon-gray {
  color: $gray-06;
  cursor: pointer;
}
.#{$prefix}-popup {
  z-index: 9999;
  color: $gray-08;
  line-height: 20px;
  font-size: 14px;
  width: 300px;

  .#{$prefix}-bar {
    border-radius: 4px 4px 0 0;
    height: 4px;
    &.green {
      background: $primary-success;
    }
    &.red {
      background: $primary-danger;
    }
    &.gray {
      background-color: $gray-05;
    }
  }

  &-header {
    border-bottom: 1px solid $gray-02;
    padding: 20px 16px;
  }

  &-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px;
    color: $gray-08;
  }
  &-desc {
    margin-top: 8px;
    line-height: 20px;
    color: $gray-06;
    font-size: 12px;
  }

  &-detail {
    padding: 20px 16px;
    color: $gray-06;
    font-size: 12px;
    line-height: 20px;
  }

  .#{$prefix}-success {
    .at-text-avatar-addedText {
      margin-left: 8px;
    }
    &-key {
      margin-top: 8px;
    }
  }
}
